<style rel="stylesheet/scss" lang="scss" >
.quick {
  margin-left: 20px;
  height: 100%;
  overflow-y: scroll;
  ul {
    padding: 0;
    margin: 0;
  }
  .quick-header {
    font-weight: 700;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.678431);
  }
  .quick-item {
    //overflow: hidden;
    cursor: pointer;
    position: relative;
    height: 69px;
    line-height: 69px;
    list-style: none;
    .quick-icon {
      position: absolute;
      top: 0;
      margin-top: 2px;
      width: 69px;
      height: 69px;
      background-color: rgba(242, 242, 242, 1);
      float: left;
      margin-right: 10px;
      line-height: 69px;
      text-align: center;
      overflow: hidden;
      display: table;
      i {
        font-size: 28px;
        vertical-align: middle;
        display: table-cell;
      }
    }
    .quick-text {
      position: absolute;
      top: 0;
      padding-left: 79px;
    }
    .quick-name {
      font-size: 15px;
      color: #333333;
      cursor: pointer;
    }
    .quick-desc {
      margin-top: 10px;
      color: #cccccc;
      font-size: 13px;
    }
    margin-bottom: 35px;
    clear: both;
  }
  .el-card__header {
    border-bottom: 0;
  }
}
</style>
<template>
  <el-card
    class="quick"
    shadow="never"
  >
    <div
      slot="header"
      class="card-header"
    >
      <span class="quick-header">快捷入口</span>
    </div>
    <ul>
      <li
        v-for="(item,index) of newList"
        :key="'quick'+index"
        @click="handleOpen(item)"
        class="quick-item"
        valign="top"
      >
        <div class="quick-icon">
          <i
            :class="item.icon"
            :style="{'color':item.color}"
          />
        </div>
        <div class="quick-text">
          <p
            class="quick-name"
            valign="top"
          >
            {{ item.name }}
          </p>
          <!-- <p class="quick-desc">{{item.desc}}</p> -->
        </div>
      </li>
    </ul>
  </el-card>
</template>
<script>

export default {
  name: 'Quick',
  data() {
    return {
      newList: [],
    };
  },
  computed: {
    list() {
      return [
        {
          id: 'JE_SAAS_YHINFO',
          color: '#FD877D',
          icon: 'icon fe icon-clipboard',
          name: '企业信息设置',
          desc: '包含企业基本信息、联系人信息、发票等信息。',
        },
        {
          id: 'JE_CORE_ENDUSER',
          color: '#7DBAFD',
          icon: 'icon fa fa-user',
          name: '员工管理',
          desc: '企业员工花名册，维护员工信息，增、删、改、查。',
        },
        {
          id: 'JE_CORE_DEPARTMENT',
          color: '#C8EF82',
          icon: 'icon fe icon-sitemap',
          name: '组织管理',
          desc: '企业部门层级，包含部门隶属管理，部门名称、负责人、联系方式、办公地址等信息。',
        },
        {
          id: 'RABC_ROLEPERM',
          color: '#FA679E',
          icon: 'icon fa fa-key',
          name: '角色权限',
          desc: '面向角色、部门、岗位、权限组分别配置人员与权限信息。',
        },
        {
          id: 'JE_CORE_LOGINUSER',
          color: '#FFC360',
          icon: 'icon fa fa-address-book-o',
          name: '在线用户监控',
          desc: '系统在线用户行为监控异常及时发现并处理。',
        },
        {
          id: 'JE_CORE_VPROCESSINSTANCE',
          color: '#536DFE',
          icon: 'icon fe icon-chart',
          name: '工作流程监控',
          desc: '功能模块操作记录，实时统计有迹可循。',
        },
      ];
    },
  },
  mounted() {
    this.setHeight();
    const menusObj = JE._MENUS4CODE;
    for (const item of this.list) {
      if (menusObj[item.id]) {
        this.newList.push(item);
      }
    }
  },
  methods: {
    setHeight() {
      setTimeout(() => {
        document.querySelector('.quick').style.height = `${document.querySelector('.manage-chart').offsetHeight + 20}px`;
      }, 0);
    },
    handleOpen(item) {
      JE.openFuncByCode(item.id);
    },
  },
};
</script>
